<template>
  <div class="increase-day">
    <NavItem :p-style="{
      background: 'lightgreen',
      width: '250px',
      fontSize: '16px',
      textAlign: 'left'
    }">
      <template #title>
        近12日每日增长归档数据
      </template>
    </NavItem>
    <div class="line-chart">
      <div class="left-class">
        <div ref="chartRef" class="chart-container6"></div>
      </div>
      <div class="right-class">
         <NavItem :p-style="{
      background: 'lightgreen',
      width: '250px',
      fontSize: '16px',
      textAlign: 'left'
    }">
      <template #title>
        警告
      </template>
    </NavItem>
    <div class="table-container">
        <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="no" label="No" width="50" height="30"/>
    <el-table-column prop="type" label="Type" width="60"height="30" />
    <el-table-column prop="level" label="Level" width="50"height="30"/>
    <el-table-column prop="detail" label="detail" height="30"/>
  </el-table>
    </div>
      </div>
    </div>
  </div>
</template>
<script setup>
//引入公共组件
import NavItem from '@/components/NavItem.vue'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chartInstance = null

const initChart = () => {
  if (!chartRef.value) return

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: {
      left: '-7%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['4-1', '4-2', '4-3', '4-4', '4-5', '4-6', '4-7', '4-8', '4-9', '4-10'],
      axisLabel: {
        interval: 0,
        rotate: 0
      }
    },
    yAxis: {
      show: false,
      type: 'value',
      name: '存储容量 (GB)',
      axisLabel: {
        formatter: '{value}GB'
      }
    },
    series: [{
      name: '容量',
      type: 'bar',
      barWidth: '40%',   // 柱子宽度（调整为更窄）
      barGap: '15%',
      data: [48, 24, 40, 50, 40, 55, 65, 32, 50, 50],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#1E90FF' // 亮蓝色
          }, {
            offset: 1, color: '#0047AB' // 深蓝色
          }]
        }
      },
      label: {
        show: true,
        position: 'top',
        formatter: '{c}GB'
      }
    }]
  }

  chartInstance = echarts.init(chartRef.value)
  chartInstance.setOption(option)
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', () => chartInstance?.resize())
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', () => chartInstance?.resize())
  chartInstance?.dispose()
})
//表格数据
const tableData = [
  {
    no: '1',
    type: '刻录异常',
    level: '故障',
    detail:'error'
  },
   {
    no: '2',
    type: '刻录异常',
    level: '故障',
    detail:'error'
  },
    {
    no: '3',
    type: '刻录异常',
    level: '故障',
    detail:'error'
  },
    {
    no: '4',
    type: '刻录异常',
    level: '故障',
    detail:'error'
  },
]
</script>
<style scoped lang="scss">
.increase-day {
    height: 550px;
  .line-chart {
    display: flex;
    flex: 1;
height: 550px;
    .left-class {
      // background-color: antiquewhite;
      flex: 5;
      width: 100%;


      .chart-container6 {
        width: 100%;
        height: 100%;
      }
    }

    .right-class {
      // background-color: rgb(251, 169, 63);
      flex: 5;
    }
  }
}
</style>
